<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加咨询</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/put_movie.css" rel="stylesheet">
    <link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__JS__/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
    <link href="__JS__/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="__CSS__/style.css" type="text/css" />
    <link rel="stylesheet" href="__CSS__/colpick.css" type="text/css" />


</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-10">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加咨询</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="commentForm" method="post" action="{:url('articles/articleadd')}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">咨询标题：</label>
                            <div class="input-group col-sm-7">
                                <input id="title" type="text" class="form-control" name="title" required="" aria-required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">咨询描述：</label>
                            <div class="input-group col-sm-7">
                                <textarea id="description" class="form-control" name="description" required="" aria-required="true"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">模板选择：</label>
                            <div class="input-group col-sm-7">
                                <select id="description" class="form-control" name="template" required="" aria-required="true">
                                    <option value="1" selected>模板一</option>
                                    <option value="2">模板二</option>
                                    <option value="3">模板三</option>
                                </select>
                            </div>
                        </div
                        <div class="form-group">
                            <label class="col-sm-3 control-label">视频主色调：</label>
                            <div class="input-group col-sm-7">
                               <input type="text" id="picker3" name='color'>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">类目选择：</label>
                            <div class="input-group col-sm-7">
                                <select id="description" class="form-control" name="book_son_id" required="" aria-required="true">
                                    {if !empty($book_data)}
                                    {foreach name="book_data" item="vo"}
                                    <option value="{$vo.id}">{$vo.title}</option>
                                    {/foreach}
                                    {/if}
                                </select>
                            </div>
                        </div>
                    <!--     <div class="form-group">
                            <label class="col-sm-3 control-label">关键词：</label>
                            <div class="input-group col-sm-7">
                                <input id="keywords" class="form-control" name="keywords">
                            </div>
                        </div> -->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">缩略图：</label>
                            <input name="thumbnail" id="thumbnail" type="hidden"/>
                            <div class="form-inline">
                                <div class="input-group col-sm-2">
                                    <button type="button" class="layui-btn" id="test1">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                </div>
                                <div class="input-group col-sm-3">
                                    <div id="sm"></div>
                                </div>
                            </div>

                        </div>
                         <div class="form-group">
                            <label class="col-sm-3 control-label">咨询视频：</label>
                            <div class="input-group col-sm-7">
                               <div id="i_select_files">
                                    </div>

                                <div id="i_stream_files_queue">
                                    </div>
                                    <span onclick="javascript:_t.upload();">开始上传</span>|<span onclick="javascript:_t.stop();">停止上传</span>|<span onclick="javascript:_t.cancel();">取消</span>
                                    |<span onclick="javascript:_t.disable();">禁用文件选择</span>|<span onclick="javascript:_t.enable();">启用文件选择</span>
                                    <br>
                                    Messages:
                                    <div id="i_stream_message_container" class="stream-main-upload-box" style="overflow: auto;height:200px;">
                                    </div>
                                <br>


                                <script type="text/javascript" src="__JS__/put_movie.js"></script>
                                <script type="text/javascript">
                                /**
                                 * 配置文件（如果没有默认字样，说明默认值就是注释下的值）
                                 * 但是，on*（onSelect， onMaxSizeExceed...）等函数的默认行为
                                 * 是在ID为i_stream_message_container的页面元素中写日志
                                 *  http://www.twinkling.cn/ api配置等相关地址
                                 */
                                    var config = {
                                        browseFileId : "i_select_files", /** 选择文件的ID, 默认: i_select_files */
                                        browseFileBtn : "<div>请选择文件</div>", /** 显示选择文件的样式, 默认: `<div>请选择文件</div>` */
                                        dragAndDropArea: "i_select_files", /** 拖拽上传区域，Id（字符类型"i_select_files"）或者DOM对象, 默认: `i_select_files` */
                                        dragAndDropTips: "<span>把文件(文件夹)拖拽到这里</span>", /** 拖拽提示, 默认: `<span>把文件(文件夹)拖拽到这里</span>` */
                                        filesQueueId : "i_stream_files_queue", /** 文件上传容器的ID, 默认: i_stream_files_queue */
                                        filesQueueHeight : 200, /** 文件上传容器的高度（px）, 默认: 450 */
                                        messagerId : "i_stream_message_container", /** 消息显示容器的ID, 默认: i_stream_message_container */
                                        multipleFiles: true, /** 多个文件一起上传, 默认: false */
                                        autoUploading: false, /** 选择文件后是否自动上传, 默认: true */
                                //      autoRemoveCompleted : true, /** 是否自动删除容器中已上传完毕的文件, 默认: false */
                                //      maxSize: 104857600//, /** 单个文件的最大大小，默认:2G */
                                //      retryCount : 5, /** HTML5上传失败的重试次数 */
                                //      postVarsPerFile : { /** 上传文件时传入的参数，默认: {} */
                                //          param1: "val1",
                                //          param2: "val2"
                                //      },
                                        swfURL : "__JS__/swf/FlashUploader.swf", /** SWF文件的位置 */
                                        tokenURL : "{:url('articles/big_upload',['action' => 'tk'])}", /** 根据文件名、大小等信息获取Token的URI（用于生成断点续传、跨域的令牌） */
                                        frmUploadURL : "{:url('articles/big_upload',['action' => 'fd'])}", /** Flash上传的URI */
                                        uploadURL : "{:url('articles/big_upload',['action' => 'up'])}", /** HTML5上传的URI */
                                //      simLimit: 200, /** 单次最大上传文件个数 */
                                //      extFilters: [".txt", ".rpm", ".rmvb", ".gz", ".rar", ".zip", ".avi", ".mkv", ".mp3"], /** 允许的文件扩展名, 默认: [] */
                                //      onSelect: function(list) {alert('onSelect')}, /** 选择文件后的响应事件 */
                                //      onMaxSizeExceed: function(size, limited, name) {alert('onMaxSizeExceed')}, /** 文件大小超出的响应事件 */
                                //      onFileCountExceed: function(selected, limit) {alert('onFileCountExceed')}, /** 文件数量超出的响应事件 */
                                //      onExtNameMismatch: function(name, filters) {alert('onExtNameMismatch')}, /** 文件的扩展名不匹配的响应事件 */
                                //      onCancel : function(file) {alert('Canceled:  ' + file.name)}, /** 取消上传文件的响应事件 */
                                //      onComplete: function(file) {alert('onComplete')}, /** 单个文件上传完毕的响应事件 */
                                //      onQueueComplete: function() {alert('onQueueComplete')}, /** 所以文件上传完毕的响应事件 */
                                //      onUploadError: function(status, msg) {alert('onUploadError')} /** 文件上传出错的响应事件 */
                                    };
                                    var _t = new Stream(config);
                                </script>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">视频：</label>
                            <div class="input-group col-sm-7">
                                <video src="movie.ogg" controls="controls" id="commit_movie"></video>
                                <input type="hidden" name="movie_path" value=''>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-3 control-label">咨询内容：</label>
                            <div class="input-group col-sm-7">
                                <script id="container" name="content" type="text/plain">
                                </script>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-8">
                                <!--<input type="button" value="提交" class="btn btn-primary" id="postform"/>-->
                                <button class="btn btn-primary" type="submit">确认提交</button>
                            </div>
                        </div>
                        <input type="hidden" name="movie_time" id='movie_time'>
                        <video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)"></video>  
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
<script src="__JS__/content.min.js?v=1.0.0"></script>
<script src="__JS__/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="__JS__/plugins/validate/jquery.validate.min.js"></script>
<script src="__JS__/plugins/validate/messages_zh.min.js"></script>
<script src="__JS__/layui/layui.js"></script>
<script src="__JS__/jquery.form.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.config.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.all.js"></script>
<script src="__JS__/colpick.js"></script>
<script src="__JS__/plugin.js"></script>

<script type="text/javascript">
    function changFile(ele){
        document.getElementById("aa").src=ele;
    }
    function myFunction(ele) {  
        var time = Math.floor(ele.duration);
        $('#movie_time').val(time);
    } 
    var index = '';
    function showStart(){
        index = layer.load(0, {shade: false});
        return true;
    }

    function showSuccess(res){

        layer.ready(function(){
            layer.close(index);
            if(1 == res.code){
                layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    window.location.href = res.data;
                });
            }else if(111 == res.code){
                window.location.reload();
            }else{
                layer.msg(res.msg, {anim: 6});
            }
        });
    }

    $(document).ready(function(){
        // 添加角色
        var options = {
            beforeSubmit:showStart,
            success:showSuccess
        };

        $('#commentForm').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });

        $('#keywords').tagsinput('add', 'some tag');
        $(".bootstrap-tagsinput").addClass('col-sm-12').find('input').addClass('form-control')
            .attr('placeholder', '输入后按enter');

        // 上传图片
        layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: "{:url('articles/uploadImg')}" //上传接口
                ,done: function(res){
                    //上传完毕回调
                    $("#thumbnail").val(res.data.src);
                    $("#sm").html('<img src="' + res.data.src + '" style="width:40px;height: 40px;"/>');
                }
                ,error: function(){
                    //请求异常回调
                }
            });
        });

        var editor = UE.getEditor('container');
    });

    // 表单验证
    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
        },
        success: function(e) {
            e.closest(".form-group").removeClass("has-error").addClass("has-success")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });
</script>
</body>
</html>
